<template>
  <div class="me">
    <div class="user-box">
      <!-- header区域 -->
      <z-header>我的知心购</z-header>
      <!-- 页面核心区域 -->
      <section class="user-page">
        <!-- 用户信息 -->
        <div class="user-info">
          <div class="info">
            <img src="@/assets/user.png" />
            <div>
              <p>{{$store.state.userinfo.username}}</p>
              <span class="name">用户名：{{$store.state.userinfo.username}}</span>
              <span class="phone">{{$store.state.userinfo.phone}}</span>
            </div>
            <router-link to="/profile" class="account-management">
              <i class="iconfont iconfont-shezhi"></i>账号管理
            </router-link>
          </div>
        </div>
        <!-- 订单 -->
        <div class="user-menu">
          <div class="menu-item">
            <i class="iconfont iconfont-daifukuan"></i>
            <span>待付款</span>
          </div>
          <div class="menu-item">
            <i class="iconfont iconfont-daishouhuo"></i>
            <span>待收货</span>
          </div>
          <div class="menu-item">
            <i class="iconfont iconfont-yiwancheng"></i>
            <span>已完成</span>
          </div>
          <div class="menu-item">
            <i class="iconfont iconfont-quanbudingdan"></i>
            <span>全部订单</span>
          </div>
        </div>
        <div>
          <div class="user-fork">
            <div class="fork-item">
              <i>20</i>
              <span>关注的商品</span>
            </div>
            <div class="fork-item">
              <i>5</i>
              <span>关注的店铺</span>
            </div>
            <div class="fork-item">
              <i>10</i>
              <span>我的足迹</span>
            </div>
          </div>

          <p class="recommend-title">为你推荐</p>
          <recommend-box />
          
        </div>
      </section>
    </div>

    <!-- 底部导航栏 -->
    <tabbar :active="3" />
  </div>
</template>

<script>
import tabbar from "../../components/tabbar.vue";
import zHeader from "../../components/z-header.vue"
import recommendBox from "../../components/recommendBox.vue";
export default {
  components: {
    zHeader,
    tabbar,
    recommendBox
  },
}
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin.scss";

.user-box {
  background: #f7f7f7;

  .user-info {
    width: 94%;
    margin: 20px 3%;
    height: 230px;
    background: linear-gradient(90deg, #ff5303, #fd856d);
    box-shadow: 0 2px 5px rgba(255, 98, 98, 0.4);
    @include borderRadius(12px);

    p {
      text-align: left;
      padding-left: 30px;
    }

    .phone {
      padding-left: 20px;
    }

    .info {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      padding: 50px 30px;
      @include boxSizing;

      img {
        border-radius: 60px;
        width: 120px;
        height: 120px;
      }

      div {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        line-height: 40px;
        font-size: 28px;
        color: #fff;

        .name {
          color: hsla(0, 0%, 100%, 0.7);
          font-size: 26px;
          padding: 5px 0;
        }

        span {
          &:nth-child(1) {
            color: #999;
            font-size: 26px;
          }
        }
      }

      .account-management {
        position: absolute;
        top: 20px;
        right: 40px;
        font-size: 26px;
        color: rgba(76, 0, 0, 0.7);

        .iconfont {
          padding-right: 10px;
          font-size: 28px;
          color: rgba(76, 0, 0, 0.7);
        }
      }
    }
  }

  .user-menu {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 150px;
    background: #fff;

    .menu-item {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100px;
      text-align: center;
      margin: 25px 0;

      .iconfont {
        font-size: 50px;
        color: #dd9e58;

        &.icon-money {
          font-size: 44px;
          padding-top: 6px;
        }

        &.icon-icon1 {
          @extend .icon-money;
          color: $red;
        }
      }

      span {
        padding-top: 10px;
        font-size: 24px;
        color: #000;
      }
    }
  }

  .user-fork {
    margin: 30px 0;
    @extend .user-menu;

    .fork-item {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100px;
      margin: 30px 0;
      text-align: center;

      i {
        font-style: normal;
        font-weight: bold;
        padding: 10px 0;
        font-size: 28px;
      }
    }
  }

  .recommend-title {
    width: 100%;
    height: 90px;
    padding-left: 20px;
    line-height: 90px;
    background: #fff;
    @include boxSizing;
  }

}
</style>